import { useModel } from '@umijs/max';
import { Carousel, Image } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

const HomePage = () => {
  const { name } = useModel('global');
  const [dataSource, setDataSource] = useState([]);

  useEffect(() => {
    let data = localStorage.getItem('dataSource');
    setDataSource(JSON.parse(data));
  }, []);

  return (
    <div className={styles.container}>
      <Carousel
        arrows
        infinite={false}
        autoplay
        adaptiveHeight
        fade
        draggable
        speed={600}
        autoplaySpeed={2000}
      >
        {dataSource?.map((item, index) => {
          return (
            <div key={item.id} className={styles.itemBox}>
              <div className={styles.itemTitle}>{item.title}</div>
              <div className={styles.itemImg}>
                <Image width={400} preview={false} src={item.url} />
              </div>
              <div className={styles.itemContent}>
                <div className={styles.itemDec}>{item.dec}</div>
              </div>
            </div>
          );
        })}
      </Carousel>
    </div>
  );
};

export default HomePage;
